<template>
  <div>
    <el-table
    :data="tableData"
    :stripe="true"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
      <el-form label-position="left" inline class="demo-table-expand">
        <el-form-item label="发送日期">
        <span>{{ props.row.chat_date }}</span>
        </el-form-item>
        <el-form-item label="发送时间">
        <span>{{ props.row.chat_time }}</span>
        </el-form-item>
        <el-form-item label="发送对象">
        <span>{{ props.row.recv_name+'('+props.row.recv_id+')'}}</span>
        </el-form-item>
        <el-form-item label="发送内容">
        <span>{{ props.row.content}}</span>
        </el-form-item>
        <el-form-item label="状态">
        <span>{{ props.row.status === 0?'未回复':'已回复' }}</span>
        </el-form-item>
        <el-form-item label="回复内容">
        <span>{{ props.row.status ===0? '未回复':props.row.response }}</span>
        </el-form-item>
        <el-form-item label="回复日期">
        <span>{{ props.row.status ===0? '未回复':props.row.resp_date}}</span>
        </el-form-item>
        <el-form-item label="回复时间">
        <span>{{ props.row.status ===0? '未回复':props.row.resp_time }}</span>
        </el-form-item>
      </el-form>
      </template>
    </el-table-column>
    <el-table-column
      label="发送日期">
      <template slot-scope="scope">
      <span>{{ scope.row.chat_date }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="发送时间">
      <template slot-scope="scope">
      <span >{{ scope.row.chat_time }}</span>
      </template>
    </el-table-column>
    
    <el-table-column
      label="发送对象">
      <template slot-scope="scope">
      <span >{{ scope.row.recv_name+'('+scope.row.recv_id+')'}}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="信件内容">
      <template slot-scope="scope">
      <span >{{ scope.row.content }}</span>
      </template>
    </el-table-column>
    <el-table-column
      :filters="[{ text: '已回复', value: 1 }, { text: '未回复', value: 0 }]"
      :filter-method="filterTag"
      filter-placement="bottom-end"
      label="状态">
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.status === 1 ? 'primary' : 'danger'"
          disable-transitions>{{scope.row.status===1?'已回复':'未回复'}}</el-tag>
      </template>
    </el-table-column>
    </el-table>
  </div>

</template>

<script>
import { showSendMsg } from '@/api/user'


export default {

  data() {
    return {
      tableData:[]
    }
  },
  created: function() {
      showSendMsg(this.$store.getters.token).then(response=>{
        this.tableData=response.data.msg
      })
  },
  methods: {
    filterTag(value, row) {
      return row.status === value;
    }
  }
    


}

</script>


<style>
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
</style>